<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>多重边框按钮</title>
    <link rel="stylesheet" href="./017.css" type="text/css" />
  </head>
  <body>
    <!-- 利用绝对定位和padding，可以给按钮做出3套大小不一的边框来，这样效果更炫了。 -->
    <button class="btn btn-primary btn-ghost btn-multiple-border-stroke">
      <div class="btn-borders-group">
        <div class="border-top"></div>
        <div class="border-right"></div>
        <div class="border-bottom"></div>
        <div class="border-left"></div>
      </div>
      <div class="btn-borders-group">
        <div class="border-top"></div>
        <div class="border-right"></div>
        <div class="border-bottom"></div>
        <div class="border-left"></div>
      </div>
      <div class="btn-borders-group">
        <div class="border-top"></div>
        <div class="border-right"></div>
        <div class="border-bottom"></div>
        <div class="border-left"></div>
      </div>
      <span class="btn-text">Start</span>
    </button>
  </body>
</html>
